<template>
	<view class="page" :style="{'height':h+'px','padding-bottom':(mt*2+56+30)+'px'}">


		<c-nav-bar1 title="订单详情"></c-nav-bar1>

		<image class="bg" src="https://i.ringzle.com/file/20240306/db17b6f5596e4bff97b34204a8ac87ac.png" mode="">
		</image>
		<view class="content" :style="{'margin-top':mt+'px'}">
			<view class="c_state">{{FishJialeOcfg[object.state]}}</view>
			<view class="c_booking c_box" v-if="object.orderType==0&&  object.state==4">
				<view class="cb_title">立即预约游玩</view>
				<view class="cb_tip">节假日容易爆满，建议提前预约</view>
				<view class="cb_btn" @tap="toBooking">{{object.state==4?'立即预约':object.state==3?'再次购买':''}}</view>
			</view>
			<view class="c_info c_box">
				<view class="ci_top">
					<view class="cit_l">
						<image src="https://i.ringzle.com/file/20231111/2df3adefe9b4420dbf9c0929b4b67a27.png"></image>
						<text>{{object.fishermanName}}</text>
					</view>
					<image class="cit_r" src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
				<view class="ci_ship">
					<view class="cis_l">
						<image :src="picList[0]"></image>
						<view class="cisl_info">
							<text>{{object.thingName}}</text>
							<!-- <text>{{object.tip}} </text> -->
							<text> 随时退 过期退</text>
						</view>
					</view>
					<view class="cis_r">
						<view>￥<span>{{object.price}}</span></view>
						<view>X {{object.num}}</view>
						<view>实付<span>￥</span><text>{{object.totalPrice}}</text></view>
					</view>
				</view>
				<!-- 	<view class="ci_code" v-if="object.state==1||object.state==4 ||object.state==5 ||object.state==3"
					:class="object.state==3?'gray':''"> -->
				<view class="ci_code" :class="object.state==3?'gray':''">
					<canvas canvas-id="qrcode" style="width:266rpx;height:266rpx;"></canvas>
				</view>
				<!-- <view class="ci_bottom" v-if="object.state==1||object.state==4  ||object.state==5 ||object.state==3"> -->
				<view class="ci_bottom">
					<view class="listItem-bottom">
						<view class="" style="margin: 0 auto;">
							核销辅助码： {{object.writeOffCode}}
						</view>
						<view class="">
							<text class="copy" @click="copyOrderNo(object.writeOffCode)">复制</text>
						</view>
					</view>


				</view>
				<view class="ci_ytk" v-if="object.state==-3">
					<view class="ciy_l">
						<view class="ciyl_l">
							<text>已退款</text>
							<text>已退回原账户</text>
						</view>
						<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
					</view>
					<view class="ciy_r">{{object.code}}</view>
				</view>
			</view>
			<view class="c_note c_box" v-if="object.state==1||object.state==4  ||object.state==5 ||object.state==3">
				<text>使用须知</text>
				<text>营业时间：{{object.useTime}}</text>
				<text>上船地址：{{object.address}}</text>
			</view>
			<view class="c_order c_box" v-if="object.state==7">
				<view class="co_title">订单信息</view>
				<view class="co_item">
					<text>订单编号</text>
					<view class="coi_r">
						<text>{{object.writeOffCode}}</text>
						<view @tap="copyOrderNo(object.writeOffCode)">复制</view>
					</view>
				</view>
				<view class="co_item">
					<text>手机号码</text>
					<text>{{object.phone}}</text>
				</view>
				<view class="co_item">
					<text>下单时间</text>
					<text>{{object.createTime}}</text>
				</view>
			</view>
		</view>
		<!-- 	<view class="bottom" @tap="phoneShow=true"
			v-if="object.state==1||object.state==4  ||object.state==5 ||object.state==3">
			<image src="https://i.ringzle.com/file/20231111/907166d76acc4501b59e355e53ab712a.png"></image>
			<text>电话联系商家</text>
		</view> -->
		<view class="bottom bottom_btns" v-if="object.state !==3">
			<view @tap="toRefund" style="width: 100%;">
				申请退款
			</view>
		</view>
		<view class="bottom bottom_btns" v-if="object.state==-3">
			<view @tap="deleteOrder">删除订单</view>
			<view @tap="againBooking">再次预订</view>
		</view>
		<view class="bottom bottom_btns" v-if="object.state==-0">
			<view @tap.stop="cancelOrder(object)">取消</view>
			<view @tap="toPay(object)">立即支付</view>
			<!-- <view @tap="againBooking">再次预订</view> -->
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import UQrcode from '@/uqrcode.js'
	export default {
		data() {
			return {
				h: uni.getWindowInfo().windowHeight - 56,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#FFFFFF"
				},
				FishJialeOcfg: this.$FishJialeOcfg,
				id: '',
				object: {},
				phoneShow: false,
				picList: []
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
				this.getDetails(this.id);
			}
			this.qrFun('00000000')
		},
		// mounted() {
		// 	this.getDetails()
		// },

		methods: {
			qrFun(text) {
				UQrcode.make({
					canvasId: 'qrcode', //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: text, //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根据自己的需要
					size: 133,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			// 获取orderCode  chuan
			getDetails(id) {
				this.$api.get('/api/fishermanOrder/getDetails?orderCode=' + id).then(res => {
					this.object = res.data.data
					this.qrFun(this.object.writeOffCode)
					this.picList = this.object.pic.split(',')
				})
			},
			// 立即预约
			toBooking() {
				uni.setStorageSync('listObject', this.object);
				uni.navigateTo({
					url: '/pagesMy/FishJialeList/subscribe'
				})
			},
			//申请退款
			toRefund() {
				uni.navigateTo({
					url: '/pagesMy/FishJialeList/applyRefund?object=' + JSON.stringify({
						orderCode: this.object.orderCode,
						title: this.object.title,
						price: this.object.price,
						num: this.object.num
					})
				})
			},
			//取消订单
			cancelOrder(item) {

				this.$api.put('/api/fishermanOrder', {
					id: item.id,
					state: -1
				}).then(res => {
					if (res.data.code === 0) {
						this.$showToast('订单已取消');
						this.init();
					} else this.$showModal(res.data.msg)
				})
			},
			//去支付
			toPay(item) {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: item.orderCode,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.$wxPay(res.data).then(result => {
							this.$showToast('支付成功');
							this.init();
						})
					}
				})
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			deleteOrder() {
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			againBooking() {
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			copyOrderNo(no) {
				let that = this;
				// #ifdef H5
				this.$copyText(no).then(res => {
					this.$showToast('复制成功');
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: no,
					success(res) {
						that.$showToast('复制成功');
					},
					fail(err) {
						that.$showToast('复制失败');
					}
				})
				// #endif
			},

		}
	}
</script>

<style scoped lang="less">
	/deep/.u-popup__content {
		border-radius: 32rpx 32rpx 0 0;
	}

	.gray {
		// filter: grayscale(60%) !important;
		filter: brightness(50%) !important;
	}

	.page {
		background: #F5F8FA;

		.bg {
			width: 100%;
			// height: 710rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			height: 710rpx;
		}

		.content {
			width: 100%;
			position: relative;
			padding: 0 24rpx;
			box-sizing: border-box;

			.c_state {
				width: 100%;
				padding: 30rpx 16rpx 4rpx;
				box-sizing: border-box;
				background: transparent;
				font-size: 44rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FFFFFF;
			}

			.c_box {
				background: #FFFFFF;
				border-radius: 16rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
			}

			.c_booking {
				padding: 36rpx 24rpx;

				.cb_title {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				.cb_tip {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.cb_btn {
					width: 100%;
					height: 76rpx;
					background: #007A69;
					border-radius: 16rpx;
					margin-top: 24rpx;
					line-height: 76rpx;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FFFFFF;
					letter-spacing: 2rpx;
				}
			}

			.c_info {
				.ci_top {
					width: 100%;
					height: 89rpx;
					background: #F5F8FA;
					border-radius: 16rpx 16rpx 0 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 24rpx;
					box-sizing: border-box;

					.cit_l {
						display: flex;
						align-items: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}

						text {
							font-size: 30rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
							margin-left: 19rpx;
						}
					}

					.cit_r {
						width: 30rpx;
						height: 30rpx;
					}
				}

				.ci_ship {
					padding: 30rpx 24rpx 12rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;

					.cis_l {
						display: flex;

						image {
							width: 124rpx;
							height: 124rpx;
						}

						.cisl_info {
							padding: 10rpx 0 0 20rpx;
							display: flex;
							flex-direction: column;

							text {
								font-size: 28rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;

								&:last-child {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #666666;
									margin-top: 24rpx;
								}
							}
						}
					}

					.cis_r {
						display: flex;
						flex-direction: column;

						view {
							display: flex;
							align-items: center;
							justify-content: flex-end;

							&:first-child {
								font-size: 20rpx;
								font-family: PingFang-SC-Regular, PingFang-SC;
								font-weight: 400;
								color: #333333;

								span {
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;
								}
							}

							&:nth-child(2) {
								font-size: 26rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								margin-top: 19rpx;
							}

							&:last-child {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;

								span {
									font-size: 20rpx;
								}

								text {
									font-size: 32rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;
								}
							}
						}
					}
				}

				.ci_code {
					padding-top: 56rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.ci_bottom {
					width: 100%;
					padding: 0 24rpx 30rpx;
					box-sizing: border-box;
					// display: flex;
					// justify-content: space-between;

					.listItem-bottom {
						display: flex;
						text-align: center;
						font-size: 30rpx;
						color: #111;
						font-weight: Bold;
						width: 100%;
						margin: 0 auto;

						.copy {
							color: #007A69;
							border: #007A69 1rpx solid;
							margin-left: 5rpx;
							width: 70rpx;
							height: 32rpx;
							border-radius: 23rpx;
							font-size: 20rpx;
							display: inline-block;
							text-align: center;
							line-height: 32rpx;
						}
					}


					.cib_l {
						display: flex;

						view {
							&:first-child {
								display: flex;
								align-items: center;

								span {
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;
								}

								text {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #808080;
									margin-left: 10rpx;
								}
							}

							&:last-child {
								font-size: 30rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;
								margin-top: 24rpx;
							}
						}
					}

					.cib_r {
						width: 152rpx;
						height: 58rpx;
						border-radius: 11rpx;
						border: 1rpx solid #CCCCCC;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}
				}

				.ci_ytk {
					padding: 40rpx 24rpx;
					margin-top: 23rpx;
					box-sizing: border-box;
					border-top: 1rpx solid rgba(112, 112, 112, .1);

					.ciy_l {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.ciyl_l {
							text {
								font-size: 30rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;

								&:last-child {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #808080;
									margin-left: 10rpx;
								}
							}
						}

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.ciy_r {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #AAAAAA;
						text-decoration: line-through;
						padding-top: 24rpx;
					}
				}
			}

			.c_note {
				width: 100%;
				padding: 24rpx;
				display: flex;
				flex-direction: column;

				text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-top: 30rpx;

					&:first-child {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						margin-top: 0;
					}
				}
			}

			.c_order {
				width: 100%;
				padding: 40rpx 24rpx;

				.co_title {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				.co_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 40rpx;

					&>text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;

						&:last-child {
							color: #333333;
						}
					}

					.coi_r {
						display: flex;
						align-items: center;

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						view {
							width: 78rpx;
							height: 36rpx;
							border-radius: 18rpx;
							border: 1rpx solid #CCCCCC;
							margin-left: 7rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 22rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							letter-spacing: 2rpx;
						}
					}
				}
			}
		}

		.bottom {
			width: 100%;
			height: 150rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-left: 24rpx;
			}

			&.bottom_btns {
				padding: 0 25rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					width: calc(50% - 15rpx);
					height: 80rpx;
					border-radius: 46rpx;
					// border: 1rpx solid #CCCCCC;
					background-color: #F6F6F6;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;

					&:last-child {
						// border: 1rpx solid #007A69;
						background-color: #007A69;
						color: #fff;
					}
				}
			}
		}

		.p_phone {
			&>view {
				text-align: center;
				width: 100%;

				&.pp_title {
					padding: 30rpx 0;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				&.pp_tel {
					border-top: 1rpx solid rgba(112, 112, 112, .1);
					padding: 28rpx 0 33rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #01B9F9;
				}

				&.pp_qx {
					padding: 31rpx 0 99rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					border-top: 20rpx solid #F5F7F8;
				}
			}
		}
	}
</style>